/**
 * 生成试卷
 */
import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import styles from './index.module.scss';
import { NumberPicker, Button } from '@alifd/next';
import http from '../../utils/request';

const Generate = () => {
    return (
        <div>
            <div className={styles.topTitle}>考试标题</div>
        </div>
    )
}
// header选择
const HeaderSelect = () => {
    const [count, setCount] = useState({
        sing: 0,
        multi: 0,
        answer: 0
    });
    // 单选
    const [singValue, setSingValue] = useState(0);
    // 多选
    const [multiValue, setMultiValue] = useState(0);
    // 解答
    const [answerValue, setAnswerValue] = useState(0);
    //数组
    const [list, setList] = useState({
        sing: [],
        multi: [],
        answer: []
    });
    useEffect(() => {
        getList();
    }, []);
    const getList = (page = 1) => {
        const url = 'all-list';
        const params = {
            limit: 100000,
            page: page ? page : 1,
        }
        http.get(url, { params }).then((res) => {
            if (res && res.data.code === 0) {
                const data = res.data.data.list;
                if (data.length > 0) {
                    formatArray(data);
                }
            }
        })
    }
    // 点击单选
    const ClickSing = () => {
        // 源数据
        let singList = Object.assign([], list.sing);
        const multiList = [];
        const answerList = [];
        // 结果数据
        let resultSingList = [];



        for (let i = 0; i < 3; i++) {
            for (let sin = 0; sin < singValue.length; sin++) {
                console.log(Random(singList));
            }
        }
        console.log(singList, 'list');
        console.log(list);

        console.log(singValue, multiValue, answerValue);
    }
    // 随机数处理
    const Random = (value) => {
        const sui = Math.floor(Math.random() * value.length + 1);
        return value.slice(sui, 1);
    }
    // 处理数据
    const formatArray = (data) => {
        const singList = [];
        const multiList = [];
        const answerList = [];
        // 单选
        let sing = 0;
        // 多选
        let multi = 0;
        // 解答
        let answer = 0;

        data.map((item) => {
            switch (item.type) {
                case 'single':
                    sing += 1;
                    singList.push(item);
                    break;
                case 'multi':
                    multi += 1;
                    multiList.push(item);
                    break;
                case 'answer':
                    answer += 1;
                    answerList.push(item);
                    break;
            }
        })
        setList({
            sing: singList,
            multi: multiList,
            answer: answerList
        })
        setCount({
            sing,
            multi,
            answer
        })
    }
    return (
        <div className={styles.container}>
            <div className={styles.header}>
                单选({count.sing}): <NumberPicker onChange={(res) => setSingValue(res)} defaultValue={0} min={0} max={count.sing} />
                <span style={{ marginLeft: '20px' }}>多选({count.multi}): </span> <NumberPicker onChange={(res) => setMultiValue(res)} defaultValue={0} min={0} max={count.multi} />
                <span style={{ marginLeft: '20px' }}>解答题({count.answer}): </span> <NumberPicker onChange={(res) => setAnswerValue(res)} defaultValue={0} min={0} max={count.answer} />
                <Button onClick={() => ClickSing()} style={{ marginLeft: '20px', marginRight: '20px' }} type="primary">指定生成</Button>
                <Button type="primary">全部随机生成</Button>
            </div>
            <Generate />
        </div>
    )
}
export default withRouter(HeaderSelect);